var RESERVATION = RESERVATION || {};

RESERVATION.initPage = function() {
	/*register event*/
	$("#reservation_imf").submit(
			function() {
				var list = new Array;
				var numberofpeople = $("#people_num").val();
				var date = $("#datepicker").attr("value");
				var from = $("#from_time").attr("value");
				var to = $("#to_time").attr("value");
				var fromdatetime = date + " " + from;
				var todatetime = date + " " + to;

				$.ajax( {
					type : 'POST',
					url : 'CreateReservation.jsp',
					data : "from=" + fromdatetime + "&to=" + todatetime
							+ "&numberOfPeople=" + numberofpeople,
					success : function(data) {
						alert(data);
						list = data.split(",");
						var rid = list[0];
						var tid = list[1];
						var reservation = "<tr id='reservationlistContent"+rid+"'><td class='reservation_id'>"+ rid+ "</td><td>"
						+ fromdatetime
						+ "</td><td>"
						+ todatetime
						+ "</td><td>"
						+ numberofpeople
						+ "</td><td>"
						+ tid
						+"<td align='left'><a href='#' onclick='RESERVATION.openModifyDialog("+rid+");'>Edit</a></td>"
						+"<td align='left'><a href='#' onclick='RESERVATION.cannelReservation("+rid+");'>Remove</a></td></tr>";
						$(reservation).insertAfter('#reservationlist_var tr:eq(0)');
						//$('#reservationlist_var').prepend(reservation);
						alert(reservation);
						alert("Your reservation is successful ! Thank you");
					}
				});
				return false;
	});
		
	$("#modify_dialog").dialog({
			autoOpen: false,
			modal: true,
			width: 600,
			height: 400
	});
	
	$("#modify_dialog form").submit(function() {
						var rid = $(this).data('rid');
						$(this).removeData('rid');
						var from = $(this).find(
								"#new_from_time option:selected").val();
						var to = $(this).find("#new_to_time option:selected")
								.val();
						var nppl = $(this).find("#new_people_num").val();
						var date = $(this).find("#datepicker2").val();

						alert(from + "," + to + "," + nppl + "," + date);
						var fromdatetime = date + " " + from;
						var todatetime = date + " " + to;

						$.ajax({
									type : 'POST',
									url : 'editReservation.jsp',
									data : "from=" + fromdatetime + "&to="
											+ todatetime + "&numberOfPeople="
											+ nppl + "&reservationID=" + rid
											+ '',
									success : function(data) {
										if (data < 0) {
											alert('cannot edit the reservation!');
										} else {
											var tr = $('#reservationlistContent' + rid);
											var tdlist = tr.children('td');
											tdlist[1].innerHTML = fromdatetime;
											tdlist[2].innerHTML = todatetime;
											tdlist[3].innerHTML = nppl;
											tdlist[4].innerHTML = data;

										}
										$('#modify_dialog').dialog('close');
									}
								});

						return false;
	});
	
	$("#datepicker").datepicker({dateFormat : 'yy-mm-dd'});
	$("#datepicker2").datepicker({dateFormat : 'yy-mm-dd'});
		
	/*inti RESERVATION variable*/
	this.DIALOG = 0;
	this.LIST = 1;
}

RESERVATION.showPage = function(page) {
	page = page || 0;
	$("#menucontent").children().hide();
	$("#submenu_reservation").show();

	if (page == this.DIALOG)
		$("#dialog_reservation").show();
	else
		$("#reservationList").show();
}

RESERVATION.openModifyDialog = function(id){
		$("#modify_dialog form").data("rid",id);
		$("#modify_dialog").dialog("open");
		return false;
}

RESERVATION.cannelReservation = function(id){
		var reservationID = id;
		var tablename = "#reservationlistContent"+reservationID;
		alert(reservationID);
		$.ajax({
				type: 'POST',
				url: 'cannelReservation.jsp',
				data: "reservationID="+reservationID,
				success: function(data){
					 alert(reservationID+" has been removed"+" The class name is "+tablename);
					 $(tablename).remove();
					 return false;
				}		
		});
}

	//Both function below are help function for making reservation
	function testStartEndTime() {
		var from = $("#from_time").attr("value");
		var to = $("#to_time").attr("value");
		if (from >= to) {
			alert("Start time must be earlier than end time");
			return false;
		}
		return true;
	}
	function testModifyStartEndTime(){
	var from = $("#new_from_time").attr("value");
		var to = $("#new_to_time").attr("value");
		if (from >= to) {
			alert("Start time must be earlier than end time");
			return false;
		}
		return true;
	}